<template>
	<hyb-page :title="title">
		<template v-slot:body>
			<!-- 订单信息展示 -->
			<view class="order-info gui-margin gui-bg-white gui-border-radius-large" v-if="orderInfo">
				<view class="gui-text gui-border-b gui-padding" style="font-weight: bold;">订单信息</view>
				<view class="gui-padding">
					<view class="order-item" v-for="(shop, shopIndex) in orderInfo.shangjia" :key="shopIndex">
						<view class="shop-name gui-color-blue gui-margin-bottom-small">{{shop.s_name}}</view>
						<view class="goods-item" v-for="(goods, goodsIndex) in shop.goods" :key="goodsIndex">
							<view class="gui-flex gui-align-items-center">
								<gui-image class="goods-image" :src="goods.g_thumb" :width="80" :height="80" mode="aspectFit"></gui-image>
								<view class="goods-info gui-flex1 gui-margin-left">
									<view class="goods-name gui-primary-text">{{goods.g_name}}</view>
									<view class="goods-spec gui-color-gray gui-text-small" v-if="goods.o_guige_name">
										规格：{{goods.o_guige_name}}
									</view>
									<view class="goods-price gui-color-red">
										￥{{parseFloat(goods.o_price).toFixed(2)}} × {{goods.o_count}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 评价内容 -->
			<view class="gui-margin gui-bg-white gui-border-radius-large" style="margin-top: -20rpx;">
				<view class="gui-text gui-border-b gui-padding" style="font-weight: bold;">评价内容</view>
				<view class="gui-padding">
					<textarea v-model="content" placeholder="请输入评价内容（最少2个字）" class="pingjia-textarea"></textarea>
				</view>
			</view>

			<!-- 评分 -->
			<view class="gui-margin gui-bg-white gui-border-radius-large" style="margin-top: -20rpx;">
				<view class="gui-text gui-border-b gui-padding" style="font-weight: bold;">商品评分</view>
				<view class="gui-padding">
					<gui-star @change="scoreChange" activecolor="#2497ee" :totalstars="5" :starnum="score"></gui-star>
					<view class="score-text gui-color-gray gui-text-small gui-margin-top-small">
						当前评分：{{score}}分
					</view>
				</view>
			</view>

			<!-- 发布评价按钮 -->
			<view class="gui-margin">
				<hyb-button label="发布评价" @tap="confirm"></hyb-button>
			</view>
		</template>
	</hyb-page>
</template>

<script>
	export default {
		data() {
			return {
				orderId: '',
				type: 'goods',
				title: '商品评价',
				orderInfo: null,
				content: '',
				score: 5
			}
		},

		onLoad(options) {
			console.log('评价页面参数:', options);
			this.orderId = options.order_id || '';
			this.type = options.type || 'goods';
			
			if (this.type === 'goods') {
				this.title = '商品评价';
			}
			
			uni.setNavigationBarTitle({
				title: this.title
			});
			
			if (this.orderId) {
				this.queryOrderInfo();
			} else {
				uni.showToast({
					title: '订单ID不能为空',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		},

		methods: {
			// 评分变化
			scoreChange(score) {
				this.score = score;
				console.log('评分变化:', score);
			},

			// 查询订单信息
			queryOrderInfo() {
				uni.showLoading({
					title: '加载中...'
				});
				
				uni.gPost("goods/order/info", {
					out_trade_no: this.orderId
				}).then((res) => {
					uni.hideLoading();
					console.log('订单信息:', res);
					this.orderInfo = res;
				}).catch((err) => {
					uni.hideLoading();
					console.error('获取订单信息失败:', err);
					uni.showToast({
						title: err.message || '获取订单信息失败',
						icon: 'none'
					});
				});
			},

			// 发布评价
			confirm() {
				if (!this.content.trim()) {
					uni.showToast({
						title: '请输入评价内容',
						icon: 'none'
					});
					return;
				}
				
				if (this.content.length < 2) {
					uni.showToast({
						title: '评价内容最少2个字',
						icon: 'none'
					});
					return;
				}

				uni.showLoading({
					title: '发布中...'
				});

				// 构建评价数据
				const formData = {
					order_id: this.orderId,
					content: this.content.trim(),
					score: this.score,
					type: 'goods',
					uniacid: uni.getStorageSync('uniacid') || 58
				};

				console.log('评价数据:', formData);

				// 调用评价接口
				uni.gPost("goods/pingjia/save", formData).then((res) => {
					uni.hideLoading();
					console.log('评价成功:', res);
					
					uni.showToast({
						title: '评价成功',
						icon: 'success'
					});
					
					// 延迟返回，让用户看到成功提示
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}).catch((err) => {
					uni.hideLoading();
					console.error('评价失败:', err);
					
					uni.showToast({
						title: err.message || '评价失败',
						icon: 'none'
					});
				});
			}
		}
	}
</script>

<style scoped>
	.order-info {
		border: 1rpx solid #f0f0f0;
	}

	.order-item {
		margin-bottom: 20rpx;
	}

	.shop-name {
		font-weight: bold;
		font-size: 28rpx;
	}

	.goods-item {
		margin-bottom: 15rpx;
		padding: 15rpx;
		background: #f8f9fa;
		border-radius: 8rpx;
	}

	.goods-image {
		border-radius: 8rpx;
	}

	.goods-info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.goods-name {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 8rpx;
		line-height: 1.4;
	}

	.goods-spec {
		font-size: 24rpx;
		margin-bottom: 8rpx;
	}

	.goods-price {
		font-size: 26rpx;
		font-weight: bold;
	}

	.pingjia-textarea {
		width: 100%;
		min-height: 200rpx;
		padding: 20rpx;
		border: 1rpx solid #e0e0e0;
		border-radius: 8rpx;
		font-size: 28rpx;
		line-height: 1.5;
		box-sizing: border-box;
	}

	.score-text {
		text-align: center;
	}
</style>
